<template>
  <div class="maincss">
    <div class="mainItem">
      <el-row>
        <el-card>
          <!--          <searchBox title='维护记录' :btn='btn' @func='showBtn'/>-->
          <el-row class="searchbox">
            <el-col span="1"> 检验规则</el-col>
            <el-col span="3">
              <el-input
                placeholder="维修单号"
                v-model="queryParams.taskNo"
              >
              </el-input>
            </el-col>
            <el-col span="3">
              <el-input
                placeholder="仪器编号"
                v-model="queryParams.instrumentNo"
              >
              </el-input>
            </el-col>
<!--            <el-col span="6">-->
<!--              <el-tree-->
<!--                :data="deptOptions"-->
<!--                :props="defaultProps"-->
<!--                :expand-on-click-node="false"-->
<!--                :filter-node-method="filterNode"-->
<!--                ref="tree"-->
<!--                :default-expand-all="false"-->
<!--                @node-click="handleNodeClick"-->
<!--              />-->
<!--            </el-col>-->
            <el-col span="6">
              <el-date-picker
                v-model="queryParams.createTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
<!--              <el-date-picker-->
<!--                v-model="searchDate"-->
<!--                type="datetimerange"-->
<!--                range-separator="至"-->
<!--                start-placeholder="开始日期"-->
<!--                end-placeholder="结束日期"-->
<!--              >-->
<!--              </el-date-picker>-->
            </el-col>
            <el-col span="1">
              <el-button @click="handleLoadAndQuery" type="primary">查询</el-button>
            </el-col>
            <el-col span="2">
              <el-button @click="handleOpenAdd" type="primary">新增</el-button>
            </el-col>
          </el-row>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column label="维修单号" align="center" prop="taskNo" :show-overflow-tooltip="true"/>
              <el-table-column label="仪器编号" align="center" prop="instrumentNo" :show-overflow-tooltip="true"/>
              <el-table-column label="仪器名称" align="center" prop="instrumentName"/>
              <el-table-column label="维护记录" align="center" prop="remark" :show-overflow-tooltip="true"/>
              <el-table-column label="维护结果" align="center" prop="result" :show-overflow-tooltip="true"/>
              <el-table-column label="维护人" align="center" prop="maintainer" :show-overflow-tooltip="true"/>
              <el-table-column label="联系电话" align="center" prop="contact"/>
              <el-table-column label="维护时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
              <el-table-column label="下次维护时间" align="center" prop="nextService" :show-overflow-tooltip="true"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleEditSale(scope.row)"
                  >编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination v-show="total>0" :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="handleLoadAndQuery"/>

        </el-card>
      </el-row>

      <el-drawer
        title="新增维护记录"
        :visible.sync="addShow"

        size='65%'
      >
        <addMaintenance @closeMain='handleMainClose'
                        :deviceInfo="deviceInfo"
                        :editSaleInfo="editSaleInfo"
                        :flag="false"
                        ref="mainRef"/>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import addMaintenance from './deviceInfo/addMaintenance.vue'
import {listServiceTask, updateServiceTask, delServiceTask} from "@/api/business/serviceTask"
import {treeselect} from "@/api/system/dept";
import {parseTime} from '@/utils/ruoyi'

export default {
  name: "protection",
  components: {
    addMaintenance
  },
  data() {
    return {
      btn: {
        add: true,
        reg: false,
        down: false,
        export: false,
        imp: false,
        search: true
      },
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      searchDate: [],
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo: {},
      editSaleInfo: {},
      addShow: false,
      total: 10,
      value: '',
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        instrumentNo: '',
        taskNo: '',
        startTime: '',
        endTime: '',
        createTime: ''
      }
    };
  },
  watch: {},
  created() {
    this.getTreeselect();
    this.$nextTick(() => {
      this.handleLoadAndQuery()
    })
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    showBtn(data) {
      if (data == 'add') {
        this.handleOpenAdd()
      } else if (data == 'search') {
        this.handleLoadAndQuery()
      }
    },
    handleOpenAdd() {
      this.addShow = true
    },
    handleLoadAndQuery() {
      if (this.searchDate) {
        this.queryParams.startTime = parseTime(this.searchDate[0])
        this.queryParams.endTime = parseTime(this.searchDate[1])
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      if (this.queryParams.createTime) {
        this.queryParams.createTime = parseTime(this.queryParams.createTime)
      } else {
        this.queryParams.createTime = ''
      }
      this.loading = true;
      listServiceTask(this.queryParams).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.checkList = res.rows;
      })
    },
    handleMainClose() {
      this.addShow = false
      this.handleLoadAndQuery()
    },
    handleEditSale(row) {
      this.addShow = true
      this.$nextTick(() => {
        this.$refs.mainRef.handleData(row)
      })
    }
  }
};
</script>
